<template>
  <div>
    <div class="fade-show" v-if="!initLoading">
      <div class="list-box" v-if="dataList.length">
        <template v-for="(item, index) in dataList" :key="index">
          <div class="goods-item">
            <div>
              <div class="goods-detail">
                <image
                  :src="item.goods.goods_image"
                  class="goods-image"
                  mode="aspectFill"
                ></image>
                <div class="goods-right">
                  <div class="goods-name">{{ item.goods.goods_name }}</div>
                  <div>
                    <money :value="item.goods.goods_price"></money>
                    <money market :value="item.goods.market_price"></money>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <loadmore :visible="listPage.pullUpOn && listPage.loadmore"></loadmore>
      <nomore :visible="!listPage.pullUpOn"></nomore>
      <empty text="暂无收藏" v-if="dataList.length == 0" img="0"></empty>
    </div>
    <init-load v-if="initLoading"></init-load>
  </div>
</template>
<script setup lang="ts">
import { listPageType, Result, ResultError } from "@/types";
import {
  onPageScroll,
  onPullDownRefresh,
  onReachBottom,
  onShow,
} from "@dcloudio/uni-app";
import { ref, getCurrentInstance, onMounted } from "vue";
import { getGoodsCollectionList } from "@/api/goods-collection";

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const listPage = ref<listPageType>({
  page: 1,
  last: 1,
  pullUpOn: true,
  loadmore: true,
});

const dataList = ref<any>([]);

const toInit = () => {
  getGoodsCollectionList({
    page: listPage.value.page,
  })
    .then((res: Result) => {
      dataList.value =
        listPage.value.page == 1
          ? res.data.data
          : dataList.value.concat(res.data.data);
      listPage.value.last = res.data.last_page;
      listPage.value.pullUpOn =
        res.data.last_page <= 1 && listPage.value.page == 1 ? false : true;
      dataList.value;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

onShow(() => {
  toInit();
});

onReachBottom(() => {
  listPage.value.loadmore = true;
  if (listPage.value.page == listPage.value.last) {
    listPage.value.pullUpOn = false;
    listPage.value.loadding = false;
  } else {
    listPage.value.page++;
    toInit();
  }
});
onPullDownRefresh(() => {
  listPage.value.page = 1;
  toInit();
});
onPageScroll((res) => {
  uni.$emit("onPageScroll", res.scrollTop);
});
</script>

<style>
page{
    background: var(--base-page);
}
</style>

<style scoped>
	.list-box{
	  width: calc(100% - 40rpx);
	  margin:0 20rpx;
	  margin-top: 20rpx;
	}
	.goods-item{
	  width:100% ;
	  border-radius:var(--base-radius-default);
	  background: #fff;
	  margin-bottom: 20rpx;
	  overflow: hidden;
	}
	.goods-detail{
	  display: flex;
	  justify-content: space-between;
	  padding:30rpx;
	}
	.goods-right{
	   width:calc(100% - 200rpx);
	}
	.goods-image{
	  width: 180rpx;
	  height: 180rpx;
	  border-radius: 5rpx;
	}
	.goods-name{
	  line-height:40rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	  white-space:pre-wrap;
	}
</style>
